<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import {
  homepagefindLikeService,
  homepagefindByIdListService,
  homepagefindByIdAddService,
  ArticleDetiailsListService
} from "@/api/homepage.js";
import { ArrowRight, Pointer } from "@element-plus/icons-vue";
import avatar from "@/assets/default.png";
//文章列表数据模型
const Columns = ref({});
const route = useRoute();
const id = route.params.id; // 获取文章id参数

// 获取文章列表数据
const homepageList = async () => {
  let result = await homepagefindByIdListService(id);
  //渲染视图
  Columns.value = result.data;
};

// 点赞
const findlike = async () => {
  await homepagefindLikeService();
  homepageList();
};

// 刷新文章
homepageList();

// 留言数据模型
const CommentLists = ref({});

// 查询当前文章所有留言
const ArticleDetailsList = async  () => {
  let result = await ArticleDetiailsListService(id);
  CommentLists.value = result.data;
};

//  刷新留言;
ArticleDetailsList();

// 留言内容数据模型
const comment = ref();
// userId,arricleId,comment
import { ElMessage } from "element-plus";

const onSubmit = async () => {
  let CommentData = {
    userId: null,
    articleId: id,
    comment: comment.value ? comment.value : null,
  };
  let result = await homepagefindByIdAddService(CommentData, id);
  ElMessage.success(result.msg ? result.msg : "发布成功");


  // 刷新留言;
  ArticleDetailsList();
};
</script>

<template>
  <div class="box">
    <el-breadcrumb :separator-icon="ArrowRight" style="margin: 10px">
      <el-breadcrumb-item :to="{ path: '/homepage/homepage' }">
        homepage
      </el-breadcrumb-item>
      <el-breadcrumb-item> ArticleDetails </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容展示區 -->
    <el-card class="page-container">
      <div
        class="box-homepage"
        v-for="c in Columns"
        style="width: 100%"
        :key="c.id"
      >
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span class="title" :class="'color-' + 3">
                <h2 :class="'color-' + 2">{{ c.title }}</h2>
                类型: <span class="categoryName">{{ c.categoryName }}</span>
              </span>
              <span class="userimage-box" :class="'color-' + 4">
                发布人：
                <img v-if="c.userPic" :src="c.userPic" />
                <img v-else :src="avatar" />
                {{ c.nickName }}
              </span>
            </div>
          </template>

          <div class="content">
            <span
              class="content-text"
              :class="'color-' + 1"
              v-html="c.content"
            ></span>
            <img
              :src="c.coverImg"
              style="
                z-index: -9;
                width: 96%;
                padding: 2%;
                opacity: 0.6;
                float: left;
              "
            />
          </div>
          <span class="findlike">
            <span class="findlike-like" @click="findlike(c.id)">
              点赞:<br /><el-icon style="margin-left: 10px">
                <Pointer style="width: 1em; height: 1em" />
              </el-icon>
            </span>
          </span>
          <span class="findlike-numlikes">{{ c.likes }}</span>

          <div class="updateTime">
            <span>发布时间： {{ c.updateTime }} </span>
          </div>
        </el-card>
        <!-- 留言区 -->

        <el-card class="box-card">
          <div class="card-header">
            <h2>留言：</h2>
            <el-input class="liuyaninput" type="textarea" v-model="comment">
            </el-input>
            <el-button class="liuyanbutton" type="primary" @click="onSubmit">
              发布
            </el-button>
          </div>
        </el-card>


        <el-card class="box-card">  
          <div v-for="l in CommentLists" :key="l.id" class="text item">
            <el-card class="box-card">
              <span><img :src="l.userPic " width="50" height="50">{{ l.nickname }}:{{ l.comment }}</span>
              <span style="float: right;">发布时间： {{ l.createTime }} </span>
            </el-card>
          </div>
        </el-card>
        
      </div>
    </el-card>
  </div>
 
</template>

<style lang="scss" scoped>
.box {
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}
.liuyanbutton {
  width: 15%;
  margin-right: 5%;
}
.liuyaninput {
  width: 60%;
  margin: 0 3%;
}
.commentbutton {
  width: 16%;
  margin-right: 6%;
  margin-left: 2%;
  float: right;
}
.commenttext {
  width: 50%;
  margin-top: 5px;
  margin-left: 25%;
}
.comment {
  width: 80%;
  padding: 10px;
  float: right;
}
.page-container {
  width: 100%;
  height: 100%;
}
.findlike-numlikes {
  margin-left: 10px;
  color: rgb(214, 157, 0);
}
.findlike-like {
  cursor: pointer;
  color: rgb(231, 100, 166);
  font-style: oblique;
}
.findlike {
  float: left;
  margin-bottom: 2%;
  margin-left: 5%;
}
.content-text {
  position: absolute;
  float: left;
  padding: 4%;
  z-index: 9;
}
.content {
  position: relative;
}
.categoryName {
  width: 100%;
}
.updateTime {
  color: rgb(214, 157, 0);
  float: right;
  margin-right: 5%;
  margin-bottom: 2%;
  font-style: oblique;
}
.userimage-box {
  float: right;
  margin-right: 2%;
}
.userimage-box img {
  position: relative;
  top: 10px;
  width: 40px;
  height: 40px;
  border: 2px gray;
  border-radius: 50%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  float: left;
  margin-bottom: 2%;
}
.title {
  margin-left: 1%;
}
.color-1 {
  color: rgb(56, 93, 95);
}

.color-2 {
  color: rgb(2, 24, 85);
}

.color-3 {
  color: rgb(101, 109, 64);
}
.color-4 {
  color: rgb(61, 0, 80);
}
</style>
